<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>首页</title>
    <link rel="stylesheet" href="./css/indexfooter.css">
    <link rel="stylesheet" href="./css/index.css">

    <style>
        html {
            font-size: calc(52.1111 * 100vw / 375);
        }

        @media screen and (min-width: 720px) {
            html {
                font-size: 100px;
            }
            .header{
                width: 100%;
                margin: 0 auto;
            }
        }
        /* @media screen and (max-width:375px) {
            html {
                font-size: 50px;
            }
            .header{
                width: 100%;
                margin: 0 auto;
            }
        } */
    </style>
</head>

<body>
    <div class="header">
        <div class="head-logo"><img src="./img/首页/logo.png" alt=""></div>
        <div class="head-search">
            <div class="search"><img src="./img/首页/sclae.png" alt=""></div>
            <input type="text" placeholder="搜索商品名称">
        </div>
        <div class="user">
            <div class="userbox">
                <img src="./img/首页/user.png" alt="">
            </div>
        </div>
    </div>
    <div class="bg">
        <div class="header-nav">
            <div>
                <div>推荐</div>
            </div>
            <div>
                <div>智能</div>
            </div>
            <div>
                <div>电视</div>
            </div>
            <div>
                <div>家电</div>
            </div>
            <div>
                <div>笔记本</div>
            </div>
            <div class="direction">
                <div><img src="./img/首页/bottom-direction.png" alt=""></div>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="banner" style="background-image: url(./img/首页/banner.jpeg);">
        </div>
        <div class="select-item">
            <div class="item">
                <img src="./img/首页/mijing.webp" alt="">
            </div>
            <div class="item">
                <img src="./img/首页/zhonchou.webp" alt="">
            </div>
            <div class="item">
                <img src="./img/首页/shoji.webp" alt="">
            </div>
            <div class="item">
                <img src="./img/首页/以旧换新.webp" alt="">
            </div>
            <div class="item">
                <img src="./img/首页/xmishangxing.webp" alt="">
            </div>
        </div>
        <div class="select-item">
            <div class="item">
                <img src="./img/首页/zhineng.webp" alt="">
            </div>
            <div class="item">
                <img src="./img/首页/bijiben.png" alt="">
            </div>
            <div class="item">
                <img src="./img/首页/diannaoremai.png" alt="">
            </div>
            <div class="item">
                <img src="./img/首页/xiyjiremai.webp" alt="">
            </div>
            <div class="item">
                <img src="./img/首页/mifenfka.png" alt="">
            </div>
        </div>
        <div class="xiaomi11-Ultra">
            <div class="ultra">
                <img src="./img/首页/Ultra.webp" alt="">
            </div>
            <div class="sui">
                <div class="xiaomishohuan"><img src="./img/首页/xmishohaun.webp" alt=""></div>
                <div class="dianshekuahuag"><img src="./img/首页/dainskuangh.webp" alt=""></div>
            </div>
        </div>
        <div class="line"
            style="height: 0.16rem; border-bottom: 0.16rem solid rgb(245, 245, 245); background-color: rgb(245, 245, 245);">
        </div>
        <div class="rexiaobaokuan">
            <img src="./img/首页/热销爆款.webp" alt="">
        </div>
        <div class="phone">
            <div class="phone-item">
                <div class="phone-img"><img src="./img/首页/手机/小米11.jpg" alt=""></div>
                <div class="phone-text">
                    <div class="Xiaomi-11Pro">Xiaomi 11 Pro</div>
                    <div class="xiaolon">1/1.12''GN2｜骁龙888</div>
                    <div class="price">4499 <span>起</span><span class="price " style="  color: rgba(0,0,0,.54);"><s
                                class="old">4999</s></span></div>
                    <div class="buy">立即购买</div>
                </div>
            </div>
            <div class="phone-item">
                <div class="phone-img"><img src="./img/首页/手机/折叠屏.jpg" alt=""></div>
                <div class="phone-text">
                    <div class="Xiaomi-11Pro">Xiaomi 11 Pro</div>
                    <div class="xiaolon">1/1.12''GN2｜骁龙888</div>
                    <div class="price">4499 <span>起</span><span class="price " style="  color: rgba(0,0,0,.54);"><s
                                class="old">4999</s></span></div>
                    <div class="buy">立即购买</div>
                </div>
            </div>
        </div>
        <div class="phone">
            <div class="phone-item">
                <div class="phone-img"><img src="./img/首页/手机/Note9.jpg" alt=""></div>
                <div class="phone-text">
                    <div class="Xiaomi-11Pro">Xiaomi 11 Pro</div>
                    <div class="xiaolon">1/1.12''GN2｜骁龙888</div>
                    <div class="price">4499 <span>起</span><span class="price " style="  color: rgba(0,0,0,.54);"><s
                                class="old">4999</s></span></div>
                    <div class="buy">立即购买</div>
                </div>
            </div>
            <div class="phone-item">
                <div class="phone-img"><img src="./img/首页/手机/xiaomi10s.jpg" alt=""></div>
                <div class="phone-text">
                    <div class="Xiaomi-11Pro">Xiaomi 11 Pro</div>
                    <div class="xiaolon">1/1.12''GN2｜骁龙888</div>
                    <div class="price">4499 <span>起</span><span class="price " style="  color: rgba(0,0,0,.54);"><s
                                class="old">4999</s></span></div>
                    <div class="buy">立即购买</div>
                </div>
            </div>
        </div>
        <div class="phone">
            <div class="phone-item">
                <div class="phone-img"><img src="./img/首页/手机/Note9Pro.jpg" alt=""></div>
                <div class="phone-text">
                    <div class="Xiaomi-11Pro">Xiaomi 11 Pro</div>
                    <div class="xiaolon">1/1.12''GN2｜骁龙888</div>
                    <div class="price">4499 <span>起</span><span class="price " style="  color: rgba(0,0,0,.54);"><s
                                class="old">4999</s></span></div>
                    <div class="buy">立即购买</div>
                </div>
            </div>
            <div class="phone-item">
                <div class="phone-img"><img src="./img/首页/手机/xiaomi11-888.jpg" alt=""></div>
                <div class="phone-text">
                    <div class="Xiaomi-11Pro">Xiaomi 11 Pro</div>
                    <div class="xiaolon">1/1.12''GN2｜骁龙888</div>
                    <div class="price">4499 <span>起</span><span class="price " style="  color: rgba(0,0,0,.54);"><s
                                class="old">4999</s></span></div>
                    <div class="buy">立即购买</div>
                </div>
            </div>
        </div>
        <div class="phone">
            <div class="phone-item">
                <div class="phone-img"><img src="./img/首页/手机/heisha.jpg" alt=""></div>
                <div class="phone-text">
                    <div class="Xiaomi-11Pro">Xiaomi 11 Pro</div>
                    <div class="xiaolon">1/1.12''GN2｜骁龙888</div>
                    <div class="price">4499 <span>起</span><span class="price " style="  color: rgba(0,0,0,.54);"><s
                                class="old">4999</s></span></div>
                    <div class="buy">立即购买</div>
                </div>
            </div>
            <div class="phone-item">
                <div class="phone-img"><img src="./img/首页/手机/redmi k40.jpg" alt=""></div>
                <div class="phone-text">
                    <div class="Xiaomi-11Pro">Xiaomi 11 Pro</div>
                    <div class="xiaolon">1/1.12''GN2｜骁龙888</div>
                    <div class="price">4499 <span>起</span><span class="price " style="  color: rgba(0,0,0,.54);"><s
                                class="old">4999</s></span></div>
                    <div class="buy">立即购买</div>
                </div>
            </div>
        </div>
        <div class="more">
            更多小米手机产品>
        </div>
        <div class="line-box">

        </div>
        <div class="xiaomidianshe">
            <img src="./img/首页/电视/小米电视3399.webp" alt="">
        </div>
        <div class="more">
            更多小米电视产品>
        </div>
        <div class="line-box">

        </div>
        <div class="redmiBook16">
            <img src="./img/首页/笔记本电脑/1.webp" alt="">
        </div>
        <div class="phone">
            <div class="phone-item">
                <div class="phone-img"><img src="./img/首页/笔记本电脑/b1.jpg" alt=""></div>
                <div class="phone-text">
                    <div class="Xiaomi-11Pro">小米笔记本Pro 15</div>
                    <div class="xiaolon">大师屏 轻薄大作 | 芯怀猛虎 炸裂性能</div>
                    <div class="price">6399 <span>起</span><span class="price " style="  color: rgba(0,0,0,.54);"><s
                                class="old">6399</s></span></div>
                    <div class="buy">立即购买</div>
                </div>
            </div>
            <div class="phone-item">
                <div class="phone-img"><img src="./img/首页/笔记本电脑/b2.jpg" alt=""></div>
                <div class="phone-text">
                    <div class="Xiaomi-11Pro">小米笔记本Pro 14</div>
                    <div class="xiaolon">大师屏 轻薄大作 | 芯怀猛虎 炸裂性能</div>
                    <div class="price">5499 <span>起</span><span class="price " style="  color: rgba(0,0,0,.54);"><s
                                class="old">5499</s></span></div>
                    <div class="buy">立即购买</div>
                </div>
            </div>
        </div>
        <div class="more" style="border: none;">
            更多小米笔记本产品>
        </div>
        <div class="mihome">
            <img src="./img/首页/米家智能.webp" alt="">
        </div>
        <div class="more" style="border: none;">
            更多米家家电产品>
        </div>
        <div class="line-box">

        </div>
        <div class="zhinenghaowu">
            <img src="./img/首页/智能好物.webp" alt="">
        </div>
        <div class="more" style="border: none;">
            更多米家智能产品>
        </div>
        <div class="line-box">

        </div>
        <div class="foot">
            <div class="f1">
                <img src="./img/首页/学习办公.webp" alt="">
            </div>
            <div class="f1">
                <img src="./img/首页/智能家庭.webp" alt="">
            </div>
            <div class="f1">
                <img src="./img/首页/旅行伙伴.webp" alt="">
            </div>
            <div class="f1">
                <img src="./img/首页/音乐发烧.webp" alt="">
            </div>
            <div class="f1">
                <img src="./img/首页/新家必备.webp" alt="">
            </div>
            <div class="f1">
                <img src="./img/首页/设计美学.webp" alt="">
            </div>
        </div>
        <div class="foot-bottom">
            <img src="./img/首页/foot-bottom.webp" alt="">
        </div>
        <div class="liaojie">
            <img src="./img/首页/了解小米.png" alt="">
        </div>
       
            <div class="App-box"><img src="./img/首页/App.png" alt=""></div>
      

    </div>
    <div class="foot-nav">
        <a href="./index.html">
            <div class="index"><img src="./img/底部导航/1.png" alt=""></div>
            <p class="index-text">首页</p>
        </a>
        <a href="./typelist.html">
            <div>
                <img src="./img/底部导航/2.png" alt="">
            </div>
            <p>分类</p>
        </a>
        <a href="./miquan.html">
            <div>
                <img src="./img/底部导航/3.png" alt="">
            </div>
            <p>米圈</p>
        </a>
        <a>
            <div>
                <img src="./img/底部导航/4.png" alt="">
            </div>
            <p>购物车</p>
        </a>
        <a>
            <div>
                <img src="./img/底部导航/5.png" alt="">
            </div>
            <p>我的</p>
        </a>
    </div>
</body>

</html>